<template>
<div>
  <div class="title">推荐</div>
      <ul class="item-list">
          <li class="item border-bottom" v-for=" item of list" :key='item.id'>
              <img class='img' :src="item.imgUrl">
              <div class="info">
                <p class="info-title">{{item.title}}</p>
                <p class="info-desc">{{item.desc}}</p>
                <button class="info-btn">查看详情</button>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'Reco',
  props: {
    list: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
    .title
     background  :#eee
     margin-top :.2rem
     line-height :.8rem
     text-indent :.2rem
    .item
     overflow :hidden
     display :flex
     height 1.9rem
     .img
      width :1.7rem
      height :1.7rem
      padding :.1rem
     .info
      flex:1
      padding :.1rem
      min-width :0
      .info-title
       line-height :.54rem
       font-size :.32rem
       ellipsis()
      .info-desc
       line-height :.4rem
       color :#ccc
       ellipsis()
      .info-btn
       line-height :.44rem
       margin-top :.2rem
       background-color :#ff9300
       padding :0 0.2rem
       color #fff
       border-radius : .1rem
</style>
